<template>
    <div>
        <div class="login aui-bg-f" v-if="is_show">
            <div class="content">
                <div class="aui-content aui-margin-b-15 aui-bg-f">
                    <ul class="aui-list aui-form-list aui-padded-10" style="background-image: none">
                        <li class="aui-list-item aui-margin-t-15 van-hairline--bottom">
                            <label>
                                <van-row>
                                    <van-col span="2">
                                        <i class="iconfont icon-shouji54 aui-ftn18 aui-text-6"></i>
                                    </van-col>
                                    <van-col span="22">
                                        <van-field
                                            v-model="user.username"
                                            placeholder="手机号"
                                            class="aui-padded-l-10 aui-ftn14"
                                        />
                                    </van-col>
                                </van-row>
                            </label>
                        </li>
                        <li class="aui-list-item aui-margin-t-15">
                            <label>
                                <van-row>
                                    <van-col span="2">
                                        <i class="iconfont icon-mima aui-ftn18 aui-text-6"></i>
                                    </van-col>
                                    <van-col span="22">
                                        <van-field
                                            v-model="user.password"
                                            type="password"
                                            placeholder="密码"
                                            class="aui-padded-l-10 aui-ftn14"
                                        />
                                    </van-col>
                                </van-row>
                            </label>
                        </li>
                    </ul>
                </div>
                <div class="bt">
                    <div class="aui-text-7 aui-ftn14" @click="fnOpenForget">忘记密码</div>
                    <div class="download aui-text-center aui-ftn14 aui-text-red" @click="fnOpenDownload">APP下载</div>
                </div>
            </div>
            <div class="login-btn aui-text-f aui-text-center aui-bg-red" @click="fnLogin">确认登录</div>
        </div>
    </div>
</template>
<script>
  import login from "../../../service/sign.js"
    export default {
      name: 'Login',
      props: ['show'],
        data () {
            return {
                is_show: true,
                user: {
                    username: '',
                    password: ''
                }
            }
        },
        watch: {
            show (newVal, oldVal) {
                this.is_show = newVal
            }
        },
        mounted () {
            this.is_show = this.show;
        },
        methods: {
            fnCheckData: function() {
                var mobileFormat = /^1[3|4|5|6|7|8|9][0-9]{9}$/, //手机号码格式
                passwordFormat = /^.{6,16}$/ //密码格式
                if (!this.user.username) {
                    this.utils.fnMsg('手机号码不能为空！');
                    return false;
                } else if (!mobileFormat.test(this.user.username)) {
                    this.utils.fnMsg('手机号码格式不正确！');
                    return false;
                } else if (!this.user.password) {
                    this.utils.fnMsg('密码不能为空！');
                    return false;
                } else if (!passwordFormat.test(this.user.password)) {
                    this.utils.fnMsg('请输入6~16位的密码');
                    return false;
                } else {
                    return true;
                }
            },
            fnLogin: function() {
                // 登录api
                if (this.fnCheckData()) {
                    login.fnLogin({mobile: this.user.username, password: this.$md5(this.user.password).toUpperCase()}).then(res => {
                      if (res) {
                        this.utils.fnMsg(res.msg);
                        if (res.status) {
                          // 存入token
                          this.$store.commit('ADD_COUNT', {token: {
                            t: res.token,
                            e: new Date().getTime()
                          }, uid: res.uid, aeskey: res.aeskey, username: this.user.username});
                          var vm = this;
                          setTimeout(function() {
                            // 跳转到原来的页面
                            vm.utils.fnOpenCommon(vm, {name: (vm.$route.query.from && vm.$route.query.from !== 'login') ?  vm.$route.query.from : 'my', params: vm.$route.params, query: vm.$route.query})
                          }, 2000)

                        }
                      }
                    })
                }
            },
            fnOpenForget: function() {
                this.utils.fnOpenCommon(this, {name: 'forget', query: {from: 'login'}})
            },
            fnOpenDownload: function() {
                this.utils.fnOpenCommon(this, {name: 'download'})
            },
			fnStateBack: function() {
				if (this.$route.query.from == 'login') {
					this.utils.fnOpenCommon(this, {name: 'home'})
				} else {
					this.back()
				}
			}
        }
    }
</script>
<style lang="scss" scoped>
    div.login {
        padding-bottom: 30px;
        div.content {
            width: 270px;
            margin: 0 auto;
            padding-bottom: 30px;
        }
    }
    div.login div.content div.bt {
        padding: 10px 12px 0 12px;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    div.login div.content div.bt div.download {
        border: 1px solid var(--pink);
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        padding: 0 10px;
    }
    div.login div.login-btn {
        height: 50px;
        line-height: 50px;
        border-radius: 6px;
        width: 270px;
        margin: 0 auto;
    }
    div.login div.content {
        li {
            height: 40px;
            line-height: 40px;
            input {
                height: 36px;
                line-height: 36px;
                border: 0;
                max-width: 90%;
            }
        }
    }
</style>
